<template>
  <div class="app-wrapper">
    <div class="account">
      <div class="head">
        <h2>选择平台</h2>
        <span class="fr" @click="logout">退出</span>
      </div>
      <div class="select">
        <div class="infobar">
          <img alt="头像" class="avatar" :src="avatar">
          <h3>{{ name }}</h3>
          <p>+86-15881551001</p>
        </div>
        <div class="box">
          <el-row class="dp-list" :gutter="20">
            <el-col v-for="(item, index) in uni_accounts" :key="index" :span="8">
              <div class="dp-item" @click="onSwitch(item.uniacid)">
                <div class="avatar">
                  <img :src="item.logo" class="img">
                </div>
                <div class="info">
                  <h4 class="nickname">{{ item.app_name }}</h4>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUniAccounts, setDefaultAccount, account_switch, home_ext } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  name: 'Account',
  props: {},
  data() {
    return {
      uni_accounts: []
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ])
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    this.getUniAccounts()
  },
  mounted() {},
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    async getUniAccounts() {
      const { data } = await getUniAccounts('ymapp_site')
      this.uni_accounts = data
    },
    async onSwitch(uniacid) {
      // 设置操作平台
      await setDefaultAccount(uniacid, 'ymapp_site')
      await account_switch(uniacid, 'ymapp_site')
      await home_ext(uniacid, 'ymapp_site')
      // 进入应用
      this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style lang="scss" scoped>
.account {
  width: 900px;
  margin: 0 auto;
  overflow: hidden;
  h2, h3, p {
    margin: 0;
    padding: 0;
    font: inherit;
  }
  .head {
    height: 24px;
    line-height: 30px;
    margin: 26px 0 21px;
    h2 {
      float: left;
      font-size: 16px;
      position: relative;
      color: #333;
    }
    span {
      color: #39F;
      font-size: 12px;
      cursor: pointer;
    }
  }
  .select {
    background: #f8f8f8;
    padding-bottom: 5px;
    .infobar {
      position: relative;
      padding: 15px 20px;
      line-height: 20px;
      background: #f8f8f8;
      box-sizing: border-box;
      .avatar {
        float: left;
        width: 45px;
        height: 45px;
        margin-right: 10px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
      }
      h3 {
        font-size: 14px;
        color: #111;
        font-weight: 700;
        padding-top: 3px;
      }
      p {
        font-size: 12px;
        color: #666;
      }
      .create-btn {
        position: absolute;
        bottom: 20px;
        right: 25px;
      }
    }
    .box {
      min-height: 460px;
      padding: 0 20px 20px;
      overflow-y: hidden;
      margin: 0 5px;
      background-color: #fff;
    }
  }
  .dp-list {
    margin-top: 20px;
    .dp-item {
      border: 1px solid #e7e7eb;
      padding: 10px;
      margin-bottom: 20px;
      position: relative;
      cursor: pointer;
      border-radius: 4px;
      overflow: hidden;
      &:hover {
        border-color: #3399FF;
      }
      .avatar {
        float: left;
        margin-right: 10px;
        img {
          display: block;
          width: 60px;
          height: 60px
        }
      }
      .info {
        overflow: hidden;
        .nickname {
          font-weight: normal;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden
        }
      }
    }
  }
}
</style>
